<!--  -->
<template>
  <div>
    <el-form ref="form" :inline="true" :model="selectParam" class="demo-form-inline">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-form-item>
            <el-select v-model="selectParam.insCharacter" placeholder="院校所属">
              <el-option v-for="item in insCharacter" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select v-model="selectParam.eduType" placeholder="院校类型"
              ><el-option v-for="item in eduType" :key="item" :label="item" :value="item"
            /></el-select> </el-form-item
        ></el-col>

        <el-col :span="4">
          <el-form-item>
            <el-select v-model="selectParam.insType" placeholder="办学类型"
              ><el-option v-for="item in insType" :key="item" :label="item" :value="item"
            /></el-select> </el-form-item
        ></el-col>
        <el-form-item>
          <el-button type="primary" @click="fetch">查询</el-button>
          <el-button @click="resert">重置</el-button>
        </el-form-item>
      </el-row>
    </el-form>
    <el-input v-model="selectParam.name" placeholder="请输入院校名称" @keydown.enter.native="enterSearch" />
    <div class="box">
      <a-list item-layout="horizontal" :data-source="tableList">
        <a-list-item slot="renderItem" slot-scope="item">
          <a-space slot="extra">
            <el-tag type="info" size="mini" effect="plain" v-for="tag in item.tags" :key="tag">{{ tag }}</el-tag>
          </a-space>

          <a-list-item-meta :description="item.city">
            <a slot="title" :href="item.net">{{ item.name }}</a>

            <a-avatar slot="avatar" :src="'http://127.0.0.1:8080' + item.pic" />
          </a-list-item-meta>
        </a-list-item>
      </a-list>
    </div>
    <div class="autoMid">
      <a-pagination @change="change" :total="total"> </a-pagination>
    </div>
  </div>
</template>

<script>
import { list } from "@/api/college/college"
export default {
  data() {
    return {
      insCharacter: ["985", "211", "双一流", "本科", "专科"],
      insType: ["综合", "艺术", "工科", "财经"],
      eduType: ["公办院校", "民办院校", "港澳台高校", "独立学校", "中外合作办学"],
      tableList: [],
      enterSearchName: "",
      selectParam: {
        name: "",
        insCharacter: "",
        eduType: "",
        insType: "",
        pageSize: 7,
        pageNum: 1
      },
      total: 0
    }
  },
  mounted() {
    this.fetch()
  },
  methods: {
    change(curP) {
      this.selectParam.pageNum = curP
      this.fetch()
    },
    fetch() {
      this.tableList = []
      list(this.selectParam).then(res => {
        // console.log(res)
        res.rows.forEach(item => {
          this.tableList.push({ ...item, tags: item.insCharacter.split(",") })
        })
        this.total = res.total
      })
    },
    enterSearch() {
      this.fetch()
    },
    resert() {
      this.selectParam.name = ""
      this.selectParam.insCharacter = ""
      this.selectParam.eduType = ""
      this.selectParam.major = ""
      this.selectParam.insType = ""
      this.fetch()
      // this.$refs.form.resetFields()
    }
  }
}
</script>

<style scoped>
.tag {
  float: right;
}
.autoMid {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.box {
  margin-top: 10px;
}
</style>
